import React, {useState} from "react";
import {Button, makeStyles} from "@rn-vui/themed";
import OverLayer from "../../components/OverLayer.tsx";
import {View} from "react-native";
import {RootSiblingPortal} from "react-native-root-siblings";
import {useThemeColors} from "../../hooks/hooks.tsx";

const useStyles = makeStyles((theme) => ({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        columnGap: 20
    },
    buttonItem: {
        flex: 1,
    },
    button: {
        paddingVertical: 20
    },
    overlayer: {
        width: 500
    },
}));

interface DialogRestoreProps {

}

const DialogRestore = (props: DialogRestoreProps, ref: any) => {
    const colors = useThemeColors();
    const styles = useStyles();
    const [visible, setVisible] = useState<boolean>(false);
    const callback = React.useRef<any>();

    const onPressButton = () => {
        setVisible(false);
        callback.current?.();
    }

    React.useImperativeHandle(ref, () => ({
        open: (cb: any) => {
            callback.current = cb;
            setVisible(true);
        },
        close: () => {
            setVisible(false);
        }
    }));

    if (!visible) {
        return null;
    }

    return (
        <RootSiblingPortal>
            <OverLayer overlayStyle={styles.overlayer} onBackdropPress={() => setVisible(false)}>
                <View style={styles.container}>
                    <Button
                        title={'恢复订单'}
                        containerStyle={styles.buttonItem}
                        buttonStyle={[styles.button, {backgroundColor: colors.warning}]}
                        onPress={onPressButton}
                    />
                </View>
            </OverLayer>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(DialogRestore);
